<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩管理</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; max-width: 1200px; margin: auto; }
        h1, h2, h3 { color: #333; }
        input[type="text"], input[type="number"] { width: 100%; padding: 8px; margin-bottom: 10px; box-sizing: border-box; }
        button { padding: 8px 16px; background-color: #007bff; color: white; border: none; cursor: pointer; margin-right: 10px; }
        button:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #f4f4f4; }
        .card { border: 1px solid #ccc; border-radius: 5px; padding: 10px; width: 250px; display: inline-block; margin: 10px; vertical-align: top; }
        .page-break { page-break-after: always; }
        nav a { margin-right: 10px; color: #007bff; text-decoration: none; }
        nav a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <nav>
        <a href="/">首页</a>
        <a href="/students">学生管理</a>
        <a href="/exams">考试管理</a>
        <a href="/scores">成绩管理</a>
        <a href="/analysis">成绩分析</a>
    </nav>

    <h1>成绩管理</h1>
    <select id="exam-select" onchange="loadScores()">
        <option value="">请选择考试</option>
        {% for exam in exams %}
        <option value="{{ exam.id }}">{{ exam.name }} ({{ exam.time }})</option>
        {% endfor %}
    </select>
    <label id="upload-scores-label" for="upload-scores" style="display: none;">
        <input id="upload-scores" type="file" accept=".xlsx" onchange="handleFileUpload(event, 'scores')" style="display: none;">
        <button>批量导入成绩</button>
    </label>
    <button onclick="saveAllScores()" style="margin-left: 10px;" disabled id="save-scores-btn">保存所有成绩</button>

    <table id="scores-table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>历史</th>
                <th>道法</th>
                <th>地理</th>
                <th>生物</th>
                <th>化学</th>
                <th>物理</th>
                <th>体育</th>
                <th>信息</th>
            </tr>
        </thead>
        <tbody id="scores-tbody"></tbody>
    </table>

    <script>
        const scoresTableBody = document.getElementById('scores-tbody');
        const uploadScoresLabel = document.getElementById('upload-scores-label');
        const saveScoresBtn = document.getElementById('save-scores-btn');

        let selectedExam = null;

        function loadScores() {
            const examSelect = document.getElementById('exam-select');
            const examId = examSelect.value;
            if (examId) {
                selectedExam = {{ exams | tojson }}.find(exam => exam.id === parseInt(examId));
                uploadScoresLabel.style.display = 'inline-block';
                saveScoresBtn.disabled = false;
            } else {
                selectedExam = null;
                uploadScoresLabel.style.display = 'none';
                saveScoresBtn.disabled = true;
            }

            fetch('/scores')
                .then(response => response.json())
                .then(students => {
                    scoresTableBody.innerHTML = students.map(student => `
                        <tr>
                            <td>${student.name}</td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.语文 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '语文', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.数学 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '数学', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.英语 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '英语', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.历史 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '历史', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.道法 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '道法', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.地理 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '地理', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.生物 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '生物', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.化学 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '化学', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.物理 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '物理', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.体育 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '体育', this.value)"></td>
                            <td><input type="number" value="${student.scores[selectedExam?.id]?.信息 || ''}" onblur="setScore(${student.id}, '${selectedExam?.id}', '信息', this.value)"></td>
                        </tr>
                    `).join('');
                });
        }

        function setScore(studentId, examId, courseName, scoreInput) {
            const score = scoreInput.value;
            fetch('/set_score', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `studentId=${encodeURIComponent(studentId)}&examId=${encodeURIComponent(examId)}&courseName=${encodeURIComponent(courseName)}&score=${encodeURIComponent(score)}`
            })
            .then(response => response.json())
            .then(students => loadScores());
        }

        function saveAllScores() {
            alert('所有成绩已保存');
        }

        function handleFileUpload(event, type) {
            const file = event.target.files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('file', file);
            formData.append('examId', selectedExam?.id || '');

            fetch('/upload_' + type, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (type === 'students') {
                    loadStudents();
                } else if (type === 'scores') {
                    loadScores();
                }
            });
        }

        window.onload = () => {
            loadScores();
        };
    </script>
</body>
</html>